<template>
<!--这里是商品详情的首页-->
<div class="viewport bodyBg">
    <titleBar/>
    <!--这里商品滚动区，接后台的时候可以进行for循环遍历出来-->
    <swiper :options="swiperOption">
        <swiper-slide><img class="full-img" src="@/assets/img/banner.png" /></swiper-slide>
        <swiper-slide><img class="full-img" src="@/assets/img/banner.png" /></swiper-slide>
        <swiper-slide><img class="full-img" src="@/assets/img/banner.png" /></swiper-slide>
        <div class="swiper-pagination my-swiper"  slot="pagination"></div>
    </swiper>
    <!--这里是商品的标题部分-->
    <div class="pro-info">
        <div class="p-price">
            <i>￥</i>
            <span>5799.00-6199.00</span>
            <del>5999.00-6399.00</del>
        </div>
        <div class="p-title">iphone8</div>
        <div class="p-label">
            <i>免邮</i>
        </div>
    </div>
    <div class="part-box">
        <div id="prop-selected" class="pro-part">
            <label>已选</label>
            <div class="nav-right"></div>
            <span>黑色</span> <span>64GB</span> 
        </div>
    </div>
    <div class="img-adv">
        <img class="full-img" src="@/assets/img/img_shoppingdetail.png" alt="">
    </div>
    <!-- 这里是商品评价 -->
    <div class="pro-comment offset-item" id="proComment">
        <div>
            <div class="comment-head">
                <a href="/m/mproComment?id=3919301773200188">查看更多</a>
                <label>商品评价（0）</label>
                <div class="nav-right"></div>
            </div>
            <div class="comment-lists">
            </div>
            <a class="toAllComments" href="/m/mproComment?id=3919301773200188">查看全部评价</a>
        </div>
    </div>
    <!-- 这是商品详情 -->
    <div class="pro-details offset-item" id="proDetails">
      <div class="detail-head">
        <label>图文详情</label>
      </div>
      <div class="details">
        <p><img src="http://image.yiguoaixin.com/prodTmpEditor/20181127/U1MKJ3ucrVBmdR9.jpg" style=""></p><p><img src="http://image.yiguoaixin.com/prodTmpEditor/20181127/O2LruVJkkaLKi0t.jpg" style=""></p><p><img src="http://image.yiguoaixin.com/prodTmpEditor/20181127/wU9aoEauzGSnDEY.jpg" style=""></p><p><img src="http://image.yiguoaixin.com/prodTmpEditor/20181127/wS5AfbF2zqrXMkV.jpg" style=""></p><p><img src="http://image.yiguoaixin.com/prodTmpEditor/20181127/ePk0cm3baBdkH8B.jpg" style=""></p><p><img src="http://image.yiguoaixin.com/prodTmpEditor/20181127/5NteiYSvGxQEmsT.jpg" style=""></p><p><img src="http://image.yiguoaixin.com/prodTmpEditor/20181127/zK2ox3hcbF5ntdW.jpg" style=""></p><p><img src="http://image.yiguoaixin.com/prodTmpEditor/20181127/R6hYnPDqOPSvH5D.jpg" style=""></p><p><img src="http://image.yiguoaixin.com/prodTmpEditor/20181127/viGmJDayhCtpeF2.jpg" style=""></p><p><img src="http://image.yiguoaixin.com/prodTmpEditor/20181127/hkTKA2UwMb7nMUM.jpg" style=""></p><p><img src="http://image.yiguoaixin.com/prodTmpEditor/20181127/08LzRaUkZRBEFyf.jpg" style=""></p><p><br></p>
      </div>
    </div>
    <!-- 这是服务按钮模块 -->
    <div class="pro-bottom viewport">
        <div class="bottom-l">
            <a href="#">  <!-- 客服 -->
            <img src="@/assets/img/img_gooddetail_kefu.png" alt="">
            </a>
            <a class="collect">  <!-- 收藏 -->
                <img src="@/assets/img/img_gooddetail_fav.png" alt="">
            </a>
            <router-link class="cart" to="/shopcart">  <!-- 购物车 -->
            <img src="@/assets/img/img_gooddetail_cart.png" alt="">
            <i></i>
            </router-link>
        </div>
        <div class="bottom-r">
        <div class="normal">
            <input type="button" value="加入购物车" class="jsonShopCar">
            <router-link to="/firmOrder">
            <input type="button" value="立即购买" class="prop-buyNow buyNow">
            </router-link>
        </div>
        <!-- <div class="abnormal">商品已下架</div> -->
      </div>
    </div>
</div>
</template>
<script>

import TitleBar from '@/components/web/product/TitleBar'
export default {
    name: 'product',
    data () {
        return {
            swiperOption:{
            pagination:{
                el: '.swiper-pagination',
                type: 'fraction'
            },
            autoplay:{
              delay:3000,
              disableOnInteraction:false
            },
            spaceBetween: 30,
            loop: true,
        }
        }
    },
    mounted(){
        document.documentElement.scrollTop = 0;
    },
    components:{
        titleBar:TitleBar
    }
}
</script>
<style scoped>
.swiper-container{
    margin-top:0.9rem;
    height: 7.5rem;
}
.my-swiper{
    width: 1.5rem;
    height: 0.5rem;
    color: #fff;
    border:#dfdfdf;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 0.5rem;
    bottom: .16rem;
    left: 5.7rem;
}

/* 这里商品标题方面的样式 */
.pro-info {
    position: relative;
    margin-bottom: .16rem;
    padding: .12rem .32rem 0;
    background-color: #fff;
    padding-bottom: 0.42rem;
}
.pro-info .p-title {
    margin-bottom: .08rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    height: .5rem;
    line-height: .45rem;
    font-size: .34rem;
    overflow: hidden;
}
.pro-info .p-price {
    margin-bottom: .16rem;
    color: #FF4F00;
    font-size: .26rem;
}
.pro-info .p-price span {
    font-size: .34rem;
}
.pro-info .p-price del {
    margin-left: .1rem;
    color: #AEAEAE;
}
.pro-info .p-label i {
    margin-right: .05rem;
    padding: 0 .16rem;
    font-size: .18rem;
    color: #F7772B;
    border: 1px solid #F7772B;
    border-radius: 9999px;
}

/* 这里是选择框的样式 */
.part-box {
    padding: 0 .32rem;
    background-color: #fff;
}
.part-box .pro-part {
    position: relative;
    height: .96rem;
    line-height: .96rem;
    border-bottom: 1px solid #F2F2F2;
}
.part-box .pro-part label {
    margin-right: .48rem;
    font-size: .26rem;
    color: #666;
}
.part-box .pro-part .nav-right {
    right: 0;
}
.part-box .pro-part span {
    font-size: .26rem;
}
.nav-right {
    position: absolute;
    top: 50%;
    right: .32rem;
    margin-top: -0.16rem;
    width: .32rem;
    height: .32rem;
    background: url(../../../assets/img/arrow_grey_r.png) no-repeat;
    background-size: 100%;
    transition: all .2s;
}

/* 小广告的样式 */
.img-adv {
    margin-bottom: .16rem;
    padding: .16rem;
    height: .64rem;
    text-align: center;
    background-color: #F6F5FF;
}
/* 这是商品评价的样式 */
.pro-comment {
    margin-bottom: .16rem;
    background-color: #fff;
    overflow: hidden;
}
.pro-comment .comment-head {
    position: relative;
    padding: 0 .32rem;
    height: .96rem;
    line-height: .96rem;
    border-bottom: 1px solid #F2F2F2;
}
.pro-comment .comment-head > a {
    float: right;
    margin-right: .4rem;
    font-size: .26rem;
    color: #666;
}
.pro-comment .comment-head > label {
    font-size: .3rem;
}
.pro-comment .toAllComments {
    display: block;
    margin: .32rem auto;
    width: 2.94rem;
    height: .64rem;
    line-height: .64rem;
    font-size: .26rem;
    color: #68B52E;
    text-align: center;
    border: 1px solid #68B52E;
    border-radius: 9999px;
}
.pro-details .detail-head {
    position: relative;
    padding: 0 .32rem;
    height: .96rem;
    line-height: .96rem;
    background: #fff;
}
.pro-details .detail-head > label {
    font-size: .3rem;
}
.pro-details .details {
    text-align: center;
}
.pro-details .details img {
    max-width: 7.5rem;
    height: auto;
}

/* 这里按钮模块的样式 */
.pro-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.12rem;
    background-color: #fff;
    border-top: 1px solid #F2F2F2;
    z-index: 99;
}

.pro-bottom .bottom-l {
    float: left;
    padding-top: .08rem;
    width: 2.88rem;
    height: 1.12rem;
}
.pro-bottom .bottom-l > a {
    float: left;
    width: .96rem;
    height: .96rem;
}
.pro-bottom .bottom-l > a img {
    width: 100%;
    height: 100%;
}
.pro-bottom .bottom-l > a.cart {
    position: relative;
}
.pro-bottom .bottom-l > a.cart i:empty {
    display: none;
}
.pro-bottom .bottom-r {
    height: 100%;
    overflow: hidden;
}
.pro-bottom .bottom-r .normal {
    height: 100%;
    text-align: right;
    padding-right: 0.32rem;
}
.pro-bottom .bottom-r .normal input[type=button].sub-apply {
    width: 3.98rem;
    background: #FFAB00;
    color: #fff;
    border: 0px;
    margin-left: 4.3%;
}

.pro-bottom .bottom-r .normal input[type=button] {
    width: 1.92rem;
    height: .64rem;
    line-height: .64rem;
    font-size: .26rem;
    color: #68B52E;
    text-align: center;
    background-color: #fff;
    border: 1px solid #68B52E;
    border-radius: 9999px;
    margin-top: 0.2rem;
}
</style>
